<template>
<div class="informationSize">
        <div class="header">
             <div class="header_cloth">
                 <img :src="small_img" class="cloth"/>
             </div>
             <div class="header_title">
                <span class="title_larger">个性定制纯棉T恤</span>
                <span class="title_small">白色/正背面印刷</span>
             </div>
             <div class="header_num" v-show="header_num">
                <div class="reduce" @click='reduce'>-</div>
                <input type="text" class="number"  v-model='number' readonly="readonly" />
                <div class="add"  @click='add'>+</div>
                <div class="header_tip">限购五件</div>
             </div>
        </div>
        <div class="from">
          <span class="tip">男女同款，小姐姐选小一码哦</span>
          <ul class="wrap_ul">
            <li class="wrap_li" v-for='(value,index) in sizeShow'>
            	<ul class="wrap_size" :index="index">
					       <li :class="value.class" v-for="(value,index) in value" @click="select($event,index)">{{value.name}}</li>
            	</ul>
            </li>
          </ul>
        </div>
</div>
</template>
<script>
export default {
  name: 'informationSize',
  data () {
    return {
      number:1,
      sizeShow:[
        {'one':{'name':'S','class':{select:true}},'two':{'name':'M','class':{select:false}},'three':{'name':'L','class':{select:false}},'four':{'name':'XL','class':{select:false}},'five':{'name':'XXL','class':{select:false}}
        }
      ],
      size:[],
      header_num:true,
      small_img:""
    }
  }, 
  methods:{
    select(ev,value){      //这个功能是选择size
      var _this=this;
      var parent=ev.target.parentNode.getAttribute('index');  //获取当前对象的父元素的idnex
      for(var i in _this.sizeShow[parent])
      { 
       _this.sizeShow[parent][i].class.select=false;
      }
      _this.sizeShow[parent][value].class.select=true;
      this.getSize();
      console
    },
  	reduce(){
  		if(this.number>1)
  		{
  			this.number--;
        this.$store.dispatch('getNumber',this.number)    //把商品数量number传递到store中
  			this.sizeShow.pop();         //删除size的li
        this.getSize();
  		}
  	},
  	add(){
  		if(this.number<5)
  		{
  			this.number++;
        this.$store.dispatch('getNumber',this.number)
        this.sizeShow.push({'one':{'name':'S',class:{select:true}},'two':{'name':'M',class:{select:false}},'three':{'name':'L',class:{select:false}},'four':{'name':'XL',class:{select:false}},'five':{'name':'XXL',class:{select:false}}});     //增加size的li
        this.getSize();
  		}
  	},
    getSize(){          //获取size数据
       this.size=[];           
        for(var i=0;i<this.sizeShow.length;i++)
        {                        
          for(var j in this.sizeShow[i])
            {
                if(this.sizeShow[i][j].class.select===true)
                {
                    this.size.push(this.sizeShow[i][j].name)
                }
            }
        }
        this.$store.dispatch('getSize',this.size);
    }
  },
  mounted(){
     var _this=this;
     //判断是否在活动期内，如果在活动器内则隐藏选择衣服件数的按钮
     if(this.$store.state.is_action==1)
     {
       this.header_num=false;
     };
     //获取顶部的衣服小图案
     this.$http.get('http://zoomyoung.cn/api/design/get-build-by-code',{
        params:{code:_this.$route.query.code}
     }).then(function(res){  
      console.log(res.data.data.goods_img_url)
      _this.small_img=res.data.data.goods_img_url;
     }).catch(function(err){  
          console.log(err)  
     })
  }
}
</script>


<style scoped>
 .informationSize{width: 100%;}
 .header{width: 86.6%;margin-left: 6.7%;height: 180px;}
 .header_cloth{width: 15.4%;height: 100%;float: left;}
 .header_cloth img{width: 100%;margin-top:40px;}
 .header_title{width: 39.9%;margin-left: 2.7%;float: left;height: 100px;margin-top: 42px;letter-spacing: -0.04px;font-family: PingFangSC-Medium;}
 .header_num{width: 26.2%;margin-left: 13%;height: 122px;float: left;margin-top: 58px}
 .title_larger{width:100%;height:48px;font-size: 34px;color: #FFFFFF;line-height: 48px;text-align: center;}
 .title_small{width: 81%;height: 40px;font-size: 28px;color: #B5B5B5;line-height: 40px}
 .reduce{width: 29.4%;height: 64px;text-align: center;line-height: 64px;float: left;background: #FFFFFF;border-radius: 8px 0 0 8px;border-top:2px solid #4D4E55;border-bottom:2px solid #4D4E55;}
 .number{width: 41.2%;height: 64px;text-align: center;line-height: 64px;flex: left;border: 0;background: #4D4E55;border-top:2px solid #4D4E55;border-bottom:2px solid #4D4E55;border-left:0;border-right:0;}
 .add{width: 29.4%;height: 64px;text-align: center;line-height: 64px;float: right;background: #FFFFFF;border-radius: 0 8px 8px 0;border-top:2px solid #4D4E55;border-bottom:2px solid #4D4E55;}
 .header_tip{width: 100%;height: 58px;background-image: linear-gradient(-132deg, #2E0063 0%, #4E0052 100%);border-radius: 0 0 8px 8px;font-family: PingFangSC-Regular;font-size: 24px;color: #D112CF;letter-spacing: -0.03px;text-align: center;line-height: 58px}
 .from{width: 86.6%;margin-left: 6.7%;}
 .tip{width: 100%;height: 40px;font-family: PingFangSC-Regular;font-size: 28px;color: #FFFFFF;letter-spacing: -0.04px;line-height: 40px;display: block;}
 .wrap_li{width: 100%;height: 60px;margin-top: 10px}
 .wrap_size{width: 100%;height: 60px;display: flex;justify-content: space-between;}
 .wrap_size li{width: 114px;border: 2px solid #414248;border-radius: 8px;height: 60px;text-align: center;line-height: 60px;font-family: PingFangSC-Regular;font-size: 36px;color: #666666;letter-spacing: -0.04px;}
 .wrap_size li.select{background-image: url('../../assets/img/select.png');color:  #FF00FB;border: 2px solid ;border-color: -webkit-linear-gradient(top left,#7403FF ,#E716C4) 10 10;background-position: 60px 8px;background-repeat: no-repeat;background-size: 50%}
</style>
